@import '~scss/variables';
@import '~scss/mixins';

.wrapper {
  padding: 12px 0;
}

.header {
  display: flex;
  padding: 2px 12px 14px 12px;

  .title {
    display: inline;
    @include TypographyParagraph($dark-color06);
    font-weight: $font-bold;
    line-height: 32px;
  }

  .select {
    max-width: 50%;
    & + .select {
      margin-left: 12px;
    }
  }
}

.app {
  position: relative;
  height: 48px;
}

.value {
  @include vertical-center;
  right: 12px;
  font-size: 24px;
  font-weight: $font-bold;
  line-height: 33px;
  color: $dark-color06;
}

.appContent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 48px;
  padding: 4px 105px 4px 64px;
  z-index: 1;

  :global .icon {
    @include vertical-center;
    left: 12px;
  }

  .text {
    & > div {
      @include TypographyTitleH6($dark-color07);
      & > div {
        @include ellipsis;
      }
    }

    & > p {
      @include TypographyParagraph($dark-color01);
      @include ellipsis;
    }
  }
}

.background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background-color: $bg-color;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06));
}

.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  height: 140px;
  background-color: $lightest;

  & > div {
    margin-top: 8px;
    @include TypographySymbolText;
  }
}
